<template>
  <div class="fixt">
    <div class="delivery">

      <div class="zwlbdetails">
        <ul>
          <li>
            <div style="text-align: left;">
              <!-- <p>
              <span class="datelzygsms">公司信息</span>
            </p>-->
              <div>
                <p class="zwlbbt">
                  {{reslit.title}}
                </p>
                <p>
                  联系人：{{reslit.contact}}
                </p>
                <p>
                  联系电话：{{reslit.phone}}
                </p>
                <p> 举办日期：{{reslit.holdStartDate | timedate}}<span v-if="reslit.holdEndDate"> - </span>
                  {{reslit.holdEndDate | timedate}}
                  {{ reslit.holdStartTime | timestr}}
                  <span v-if="reslit.holdEndTime"> - </span> {{ reslit.holdEndTime | timestr}}</p>
              </div>

            </div>

          </li>
        </ul>

      </div>
      <van-divider class="dividerzel" style="color:#323233;" />
      <div class="zwlbdetails">
        <ul>
          <li>
            <p class="datelzygsmspar">
              <span class="datelzygsms">招聘会说明</span>
            </p>
            <p ref="element" :style="{height:ckheight,overflow: 'hidden'}">
              {{reslit.remark}}
              <div class="ckqb" @click="ckqb" v-show="ckshow&&qbshow">查看全部</div>
              <div class="ckqb" @click="ckqb" v-show="!ckshow">收起</div>
          </li>
        </ul>
      </div>

    </div>
    <div class="splitline"></div>
    <div class="companych">

      <p class="companyheader">参会企业</p>
      <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad" :offset="30">
        <div v-if="list.length===0" style="text-align: center">暂无企业</div>
        <div class="companycount" v-for="(item,index) in list" :key="index+'comp'">

          <p @touchstart="companyDetails(item.id,item.companyId)" class="companycountheader">{{item.name}}</p>
          <van-divider color="#E8E8E8" />
          <div>
            <div v-if="ckallshow">
              <div v-for="(val,index) in item.jobVo" :key="index+'compdel'">
                <p><span class="companycountright">{{val.name}}</span>
                  <span class="companycountleft" @click="jobdetails(val.id,item.companyId,val.category)"><a
                      href="javascript:;" class="colorcompanr">查看详情</a></span>
                </p>
                <van-divider color="#E8E8E8" />
              </div>

            </div>
            <div v-if="!ckallshow&&item.jobVo">
              <p><span class="companycountright">{{item.jobVo[0].name}}</span>
                <span class="companycountleft"
                  @click="jobdetails(item.jobVo[0].id,item.companyId,item.jobVo[0].category)"><a href="javascript:;"
                    class="colorcompanr">查看详情</a></span></p>
              <van-divider color="#E8E8E8" />
              <p v-if="item.jobVo.length>1"><span class="companycountright">{{item.jobVo[1].name}}</span>
                <span class="companycountleft"
                  @click="jobdetails(item.jobVo[1].id,item.companyId,item.jobVo[1].category)"><a href="javascript:;"
                    class="colorcompanr">查看详情</a></span>
                <van-divider color="#E8E8E8" />
              </p>
            </div>

          </div>

          <van-divider color="#E8E8E8" />
          <p class="companycountcenter" v-if="item.jobVo&&item.jobVo.length>2&&!cksqshow"><span><a href="javascript:;"
                @click="ckall" class="colorcompanr">查看全部</a></span>
          </p>
          <p class="companycountcenter" v-if="item.jobVo&&item.jobVo.length>2&&cksqshow"><span><a href="javascript:;"
                @click="ckall" class="colorcompanr">收起</a></span>
          </p>
        </div>
      </van-list>
    </div>
  </div>

</template>

<script>
import JOBFAIR from '@/api/Jobfair'
import { _debounce } from '@/assets/js/public'
export default {
  data () {
    return {
      active: 1,
      activlist: ['招聘中', '已下线', '审核中', '未过审'],
      btnshow: 1,
      ckallshow: false,
      cksqshow: false,
      ckshow: true,
      qbshow: false,
      ckheight: '',
      id: '',
      reslit: {
        title: '',//招聘会名称
        phone: '',//手机号
        holdStartDate: '',//开始日期
        holdEndDate: '',//结束日期
        holdStartTime: '',//开始时间
        holdEndTime: '',//结束时间
        remark: ''
      },
      pageInfo: {
        page: 1,
        size: 5
      },
      list: [],
      loading: false,
      finished: false
    }
  },
  filters: {
    timedate (val) {
      if (val) {
        let datatime = new Date(val)
        let Year = datatime.getFullYear() + '年'
        let Month = (datatime.getMonth() + 1 < 10 ? '0' + (datatime.getMonth() + 1) : datatime.getMonth() + 1) + '月'
        let Dated = datatime.getDate() + '日'
        let time = Year + Month + Dated
        return time
      }
    },
    timestr (val) {
      if (val) {
        return val.substr(0, 5)
      }
    }

  },
  methods: {

    // 公司详情
    companyDetails (id, companyId) {
      this.$router.push({
        name: 'companyDetails',
        query: {
          id: id,
          companyId: companyId
        }
      })
    },
    // 参会企业
    findJobByCompany () {
      let that = this
      var formData = new FormData()
      formData.append('page', that.pageInfo.page)
      formData.append('size', that.pageInfo.size)
      formData.append('jobFairId', that.id)
      JOBFAIR.findJobByCompany(formData).then(res => {
        console.log(res.data)
        that.loading = false
        if (res.data.code === 200) {
          if (!res.data.data.records || res.data.data.records.length === 0) {
            // 加载结束
            that.finished = true
            return
          } else {
            for (let i = 0; i < res.data.data.records.length; i++) {
              that.list.push(res.data.data.records[i])
            }
            that.finished = false
          }

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (that.list.length >= res.data.data.total) {
            that.finished = true
          }
        }
        console.log(that.finished, 'that.finished ')
      })
    },
    // 职位详情跳转
    jobdetails (id, companyId, category) {
      this.$router.push({
        name: 'Jobdetails',
        query: {
          id: id,
          companyId: companyId,
          category: category
        }
      })
    },
    ckall () {
      this.ckallshow = !this.ckallshow
      this.cksqshow = !this.cksqshow
    },
    ckqb () {
      this.ckshow = !this.ckshow
      if (this.ckshow) {
        this.ckheight = '3rem'
      } else {
        this.ckheight = ''
      }
      this.$forceUpdate()
    },
    //招聘会详情
    jobfairDetails () {
      let that = this

      JOBFAIR.jobfairDetails(this.id).then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          that.reslit = res.data.data
          that.$nextTick(() => {
            let height = window.getComputedStyle(this.$refs.element).height
            console.log(height, 'contentHeight')
            if (parseInt(height) > 96) {
              that.qbshow = true
            }
            that.ckheight = '3rem'
          })
        }
        console.log(that.finished, 'that.finished ')
      })
    },
    // 上拉加载
    onLoad: _debounce(function (_type, index, item) {
      let that = this
      console.log(that.pageInfo.page, 'that.pageInfo.page')

      that.loading = false

      that.pageInfo.page++
      that.findJobByCompany()
    }, 2000)
  },
  created () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.findJobByCompany()
      this.jobfairDetails()
    }
  }
}
</script>

<style scoped>
.delivery {
  margin: 40px;
}
.zwlbbt {
  font-size: 28px;
  font-weight: bold;
}
.datelzygsms {
  font-size: 32px;
}
.datelzygsmspar {
  margin-bottom: 20px;
}
.dividerzel {
  margin: 40px 0 30px 0;
  border-width: 1px;
}
.colorcompanr {
  font-size: 26px;
  color: rgba(24, 147, 252, 1);
}
.splitline {
  height: 16px;
  background: rgba(246, 246, 248, 1);
  border: 1px solid rgba(232, 232, 232, 1);
  opacity: 1;
}
.companych {
  text-align: left;
  margin: 40px;
}
.companyallcount {
  margin: 0 28px;
}
.companych .companyheader {
  font-size: 32px;
  margin-bottom: 40px;
  color: rgba(34, 34, 34, 1);
}
.companycount {
  width: 670px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(240, 240, 240, 1);
  box-shadow: 0px 3px 8px rgba(35, 35, 35, 0.16);
  opacity: 1;
  border-radius: 8px;
}
.companych .companycountheader {
  font-size: 28px;

  font-weight: bold;
  margin-top: 20px;
  color: rgba(34, 34, 34, 1);
  opacity: 1;
}
.companych p {
  height: 0.8rem;
  line-height: 0.8rem;
  margin: 0 28px;
}
.companycountleft {
  float: right;
  font-size: 26px;
}
.companycountright {
  font-size: 26px;
}
.companych .companycountcenter {
  font-size: 26px;
  margin-bottom: 20px;
  text-align: center;
}
</style>
